<template>
	<view style="height: 100%; background-color: #E6E6E6;">
		<view class="head">
			<view class="head-info">
				<view class="item">
					<image mode="scaleToFill" class="circle" src="../../static/logo.png"></image>
				</view>
				<view style="flex: 8; margin: calc(1vh) 0 0 calc(2vw)" class="common-text-size">
					<p style="color: #CFB53B; font-size: larger;">{{info.nickName}}</p>
					<p style="padding-top: calc(1vh); color: #FFFFFF;">手机号：{{info.phonenumber}}</p>
				</view>
			</view>
			<view class="head-vip">
				<view><text>Vip尊享特权</text></view>
				<view>
					<text class="head-vip-watch" @click="toVip">点击查看</text>
				</view>
			</view>
			<view class="head-assets back">
				<view class="head-assets-item" style="border-right: #e6e6e6 1px solid;">
					<text>账户余额</text>
					<text style="margin-top: calc(1vh);"><b>0.00</b></text>
					<text style="color: red;margin-top: calc(1vh);" @click="getMoney">立即提现</text>
				</view>
				<view class="head-assets-item">
					<text>我的团队</text>
					<text style="margin-top: calc(1vh);"><b>0人</b></text>
					<text @click="toTeam" style="color: red; margin-top: calc(1vh);">立即查看</text>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="body-goods-order back">
				<view style="height: calc(5vh); line-height: calc(5vh); border-bottom: #E6E6E6 1px solid;">
					<b style="font-size: 4vw;">选品区订单</b>
				</view>
				<view class="common-text-size" style="display: flex; height: calc(15vh); margin-top: calc(0.1vh);">
					<view class="body-goods-order-item" @click="toChooseOrder(0)">
						<image src="../../static/resource.png" mode="widthFix"></image>
						<text class="text-small">素材</text>
					</view>
					<view class="body-goods-order-item" @click="toChooseOrder(1)">
						<image src="../../static/video.png" mode="widthFix"></image>
						<text class="text-small">视频</text>
					</view>
					<view class="body-goods-order-item" @click="toChooseOrder(2)">
						<image src="../../static/shot.png" mode="widthFix"></image>
						<text class="text-small">短视频样品</text>
					</view>
					<view class="body-goods-order-item" @click="toChooseOrder(3)">
						<image src="../../static/lineplay.png" mode="widthFix"></image>
						<text class="text-small">直播样品</text>
					</view>
				</view>
			</view>
			<!-- 达人广场订单 -->
			<view class="body-square-order back  common-text-size" v-if="false">
				<view class="body-square-order-title">
					<b>达人广场订单</b>
					<text>查看所有订单</text>
				</view>
				<view style="display: flex; height: calc(15vh); margin-top: calc(0.1vh);">
					<view class="body-goods-order-item">
						<image src="../../static/logo.png" mode="widthFix"></image>
						<text>待确认</text>
					</view>
					<view class="body-goods-order-item">
						<image src="../../static/logo.png" mode="widthFix"></image>
						<text>合作进行中</text>
					</view>
					<view class="body-goods-order-item">
						<image src="../../static/logo.png" mode="widthFix"></image>
						<text>待验收</text>
					</view>
					<view class="body-goods-order-item">
						<image src="../../static/logo.png" mode="widthFix"></image>
						<text>已完成</text>
					</view>
				</view>
			</view>
			<view class="body-square-to">
				<navigator url="/pages/homechild/offer/offer">
					<image src="../../static/red.jpg" mode="scaleToFill"></image>
					<p><b>我要去报价</b></p>
				</navigator>
			</view>
			<view class="body-square-list back common-text-size">
				<view class="body-square-list-item" v-for="(item, index) in itemList1" :key="index">
					<image :src="item.icon" mode="scaleToFill"></image>
					<view class="body-square-list-item-title" @click="toDetail(item.url)">
						<text>{{item.name}}</text>
						<uni-icons type="forward" size="24"></uni-icons>
					</view>
				</view>
			</view>
			<view class="body-square-list back common-text-size">
				<view class="body-square-list-item" v-for="(item, index) in itemList2" :key="index">
					<image :src="item.icon" mode="scaleToFill"></image>
					<view class="body-square-list-item-title" @click="toDetail(item.url)">
						<text>{{item.name}}</text>
						<uni-icons type="forward" size="24"></uni-icons>
					</view>
				</view>
			</view>
			<view class="body-login-out">
				<button @click="logOut" type="default"><text style="color: red;" class="common-text-size">推出登录</text></button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				addr: {},
				info: {},
				itemList1: [{
						name: '达人授权',
						url: `../homechild/auth/douyin/douyin?title=抖音授权&`,
						icon: "/static/douyinlogo.png"
					},
					{
						name: '绑定微信',
						url: '../homechild/auth/wx/wx?title=微信公众号授权&',
						icon: "/static/wxlogo.png"
					},
					{
						name: '绑定支付宝',
						url: '',
						icon: "/static/alipaylogo.png"
					},
					{
						name: '授权联盟',
						url: '',
						icon: "../../static/logo.png"
					},
					{
						name: '我的报价管理',
						url: '',
						icon: "../../static/logo.png"
					},
					{
						name: '邀请码',
						url: '',
						icon: "../../static/logo.png"
					},
				],
				itemList2: [{
						name: '达人推课堂',
						url: '',
						icon: "../../static/logo.png"
					},
					{
						name: '课程收藏',
						url: '',
						icon: "../../static/logo.png"
					},
					{
						name: '我的地址',
						url: '../homechild/address/address?',
						icon: "../../static/address.png"
					},
					{
						name: '联系客服',
						url: '',
						icon: "../../static/logo.png"
					},
					{
						name: '关于我们',
						url: '',
						icon: "../../static/logo.png"
					},
				]
			}
		},
		methods: {
			getUserInfo() {
				this.$http({url:"/getInfo"}).then(response => {
					let data = response.data;
					// console.log(data.user);
					if (data.code == 200) {
						this.info = {
							userId: data.user.userId, 
							phonenumber: data.user.phonenumber, 
							nickName: data.user.nickName}
					}
				});
			},
			isLogin() {
				let _this = this;
				let adminToken = uni.getStorage({
					key: "Admin-Token",
					success(data) {
						let adminToken = data.data;
						_this.getUserInfo()
					}, fail(error) {
						uni.navigateTo({
							url: "../homechild/login/login"
						})
					}
				});
			},
			getMoney() {
				uni.navigateTo({
					url: "../homechild/getmoney/getmoney"
				})
			},
			toChooseOrder(index) {
				uni.navigateTo({
					url: "../homechild/chooseorder/chooseorder"
				})
			},
			toTeam() {
				uni.navigateTo({
					url: "/pages/homechild/team/team"
				})
			},
			logOut() {
				uni.showLoading({
					title:"退出中"
				})
				uni.request({
					url: "http://zs.91gongju.cn:10003/logout",
					method: "POST",
					success(response) {
						uni.removeStorage({
							key: "Admin-Token",
							success() {
								uni.navigateTo({
									url: '../homechild/login/login'
								})
							}
						})
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			toVip() {
				uni.showToast({
					icon: "none",
					title: "暂时没有开放"
				})
				// uni.navigateTo({
				// 	url: "/pages/homechild/vip/vip"
				// })
			},
			toDetail(url) {
				if (url != '') {
					uni.navigateTo({
						url: url + `userId=${this.info.userId}`
					})
				}
				uni.showToast({
					icon: 'none',
					title: '暂未开放'
				})
			},
		},
		onShow() {
			this.isLogin();
		}
	}
</script>

<style>
	.common-text-size {
		font-size: 4vw;
	}

	.circle {
		width: calc(7vh);
		height: calc(7vh);
		border-radius: 50%;
	}

	.head {
		background-image: linear-gradient(#3a3a3a, #e6e6e6);
		width: calc(100vw);
		height: calc(39vh);
	}

	.head-info {
		width: calc(100vw);
		height: calc(15vh);
		display: flex;
		margin-left: calc(3vw);
	}

	.head-vip {
		width: calc(60vw);
		height: calc(6vh);
		line-height: calc(7vh);
		display: flex;
		/* border-left: #e6e6e6 solid 1px; */
		/* border-right: #e6e6e6 solid 1px; */
		/* border-top: #e6e6e6 solid 1px; */
		border-radius: calc(2vw);
		justify-content: space-between;
		margin-left: calc(10vw);
		margin-right: calc(10vw);
		padding: 0 calc(10vw) 0 calc(10vw);
		font-size: 5vw;
		background-image: linear-gradient(to right, #ffaa00, #f9d946);
	}

	.head-vip-watch {
		background-color: #2C405A;
		color: #FFFFFF;
		border-radius: calc(5vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.head-assets {
		width: calc(74vw);
		margin: 0 calc(3vw) 0 calc(3vw);
		display: flex;
		border: #e6e6e6 solid 1px;
		border-radius: calc(2vw);
		padding: calc(3vh) calc(10vw) calc(3vh) calc(10vw);
	}

	.head-assets-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: center;
		font-size: 5vw;
	}

	.item {
		flex: 1;
		margin: calc(1vw) calc(1vw);
	}

	.back {
		background-color: #FFFFFF;
	}

	.body-goods-order {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: 0 calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.body-goods-order-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
	}

	.body-goods-order-item image {
		width: calc(10vw);
		margin-left: calc(7vw);
		margin-bottom: calc(2vh);
	}

	.body-square-order {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.body-square-order-title {
		height: calc(5vh);
		line-height: calc(5vh);
		border-bottom: #E6E6E6 1px solid;
		display: flex;
		padding: 0 calc(1vw) 0 calc(1vw);
		justify-content: space-between;
	}

	.body-square-order image {
		width: calc(10vw);
		margin-left: calc(7vw);
		margin-bottom: calc(2vh);
	}

	.body-square-to {
		height: calc(10vh);
		margin: calc(1vh);
		border-radius: calc(50vw);
		background-image: linear-gradient(to right, #f7e4ca, #f7e4cc);
	}
	
	.body-square-to navigator {
		display: flex;
		justify-content: space-between;
		border-radius: calc(50vw);
	}

	.body-square-to image {
		height: calc(10vh);
		width: calc(25vw);
		margin-left: calc(10vw);
	}
	
	.body-square-to p {
		width: calc(70vw);
		line-height: calc(10vh);
		margin-left: calc(10vw);
		font-size: 10vw;
		color: #FFFFFF;
	}

	.body-square-list {
		width: calc(100vw);
		padding: calc(1vh) calc(2vw) 0 calc(2vw);
	}

	.body-square-list-item {
		width: calc(94vw);
		margin: calc(2vw);
		height: calc(5vh);
		line-height: calc(4vh);
		display: flex;
		justify-content: space-between;
	}

	.body-square-list-item image {
		width: calc(3vh);
		height: calc(3vh);
	}

	.body-square-list-item-title {
		width: calc(80vw);
		display: flex;
		justify-content: space-between;
		padding-right: calc(5vw);
		border-bottom: #E6E6E6 1px solid;
	}

	.body-login-out {
		padding: calc(2vh) 0 calc(2vh) 0;
	}
</style>
